<template>
  <el-container
    class="layout-default bg-page h-full"
    :style="[{ height: `${windowHeight}px`,'background-image': `url('${Bg}')`, 'background-size':'contain','background-repeat':'no-repeat'}]"
  >
    <el-header height="68" style="padding: 0">
      <div class="header bg-[var(--el-bg-color-base)] flex">
        <div class="w-[200px]">
          <TitleLogo />
        </div>
        <Nav class="flex-1" />
        <div>
          <LayoutHeader />
        </div>
      </div>
    </el-header>
    <el-container class="min-h-0">
      <el-header class="bg-transparent h-[64px]" v-if="$slots?.tools">
        <slot name="tools" />
      </el-header>
      <el-container class="min-h-0 mb-[16px]">
        <el-aside width="auto">
          <LayoutAside>
            <template v-if="$slots?.panel" #panel>
              <slot name="panel" />
            </template>
          </LayoutAside>
        </el-aside>
        <el-container>
          <el-main style="padding: 0">
            <LayoutMain>
              <template v-if="$slots?.mainLeft" #mainLeft>
                <slot name="mainLeft" />
              </template>
              <slot />
              <template v-if="$slots?.mainRight" #mainRight>
                <slot name="mainRight" />
              </template>
            </LayoutMain>
          </el-main>
          <!-- <el-footer height="auto" v-if="showFooter">
          <LayoutFooter />
        </el-footer> -->
        </el-container>
      </el-container>
    </el-container>
    <LayoutAccount v-if="userStore.showLogin"></LayoutAccount>
    <NoticePopup></NoticePopup>
  </el-container>
</template>
<script lang="ts" setup>
import { ElContainer, ElAside, ElMain, ElHeader, ElFooter } from "element-plus";
import LayoutAside from "./components/aside/index.vue";
import TitleLogo from "./components/aside/sidebar/title-logo.vue";
import Nav from "./components/aside/sidebar/nav.vue";
import LayoutHeader from "./components/header/index.vue";
import LayoutMain from "./components/main/index.vue";
import LayoutFooter from "./components/footer/index.vue";
import LayoutAccount from "./components/account/index.vue";
import NoticePopup from "./components/notice/index.vue";
import Bg from '~/assets/images/bg.png'
import { useUserStore } from "~~/stores/user";
import { useWindowSize } from "@vueuse/core";

const userStore = useUserStore();
const route = useRoute();
const { height: windowHeight } = useWindowSize({
  includeScrollbar: false,
});
const showFooter = computed(() => !route.meta.hiddenLayoutFooter);
</script>
<style lang="scss" scoped>
.layout-default {
  // background: linear-gradient(
  //   to right,
  //   var(--el-color-primary-light-9),
  //   #ffffff,
  //   var(--el-color-primary-light-9)
  // );
  background-color: var(--el-bg-color-page);
}
.dark .layout-default {
  background: #000;
}
</style>
